/**
 * 设置页面
 * 引用组件地址：
 * https://github.com/oblador/react-native-vector-icons
 * https://github.com/marcshilling/react-native-image-picker 版本为0.24
 */
'use strict';
import React from 'react';
import {
  Alert,
  StyleSheet,
  InteractionManager,
  View,
  Image,
  Text,
  TouchableOpacity,
  TextInput,
  PixelRatio,
  Platform,
  Dimensions,
  AsyncStorage,
  ListView,
  ToastAndroid
} from 'react-native';

import Icon from 'react-native-vector-icons/FontAwesome';
import Titile from './Title'
let {height, width,} = Dimensions.get('window');
const CityData =require('./CityNameJson.json');
export default class Center extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
    code:'000',
    city:'点我定位',
    wD:'/',
    wS:'/',
    day0:'',
    day1:'',
    day2:'',
    day3:'',
    day4:'',
    day5:'',
    day6:'',
    temp_day_c0:'',
    temp_day_c1:'',
    temp_day_c2:'',
    temp_day_c3:'',
    temp_day_c4:'',
    temp_day_c5:'',
    temp_day_c6:'',    
  };
  }

    /**
       * 获取城市地区数据
       */
getCityData() {
    const _this=this;
     var request = new XMLHttpRequest();
      request.onreadystatechange = (e) => {
        if (request.readyState !== 4) {
          return;
        }

        if (request.status === 200) {
          console.log('success', request.responseText);
          let re=JSON.parse(request.responseText);

            this.setState({
              code:re.code,
              city:re.value[0].city,
              wD:re.value[0].realtime.wD,
              wS:re.value[0].realtime.wS,
              //不要问我为什么不循环，我困死了。不循环了，自己写循环去
              temp_day_c:re.value[0].weathers[0].temp_day_c,
              temp_day_c1:re.value[0].weathers[1].temp_day_c,
              temp_day_c2:re.value[0].weathers[2].temp_day_c,
              temp_day_c3:re.value[0].weathers[3].temp_day_c,
              temp_day_c4:re.value[0].weathers[4].temp_day_c,
              temp_day_c5:re.value[0].weathers[5].temp_day_c,
              temp_day_c6:re.value[0].weathers[6].temp_day_c,
              day:re.value[0].weathers[0].week,
              day1:re.value[0].weathers[1].week,
              day2:re.value[0].weathers[2].week,
              day3:re.value[0].weathers[3].week,
              day4:re.value[0].weathers[4].week,
              day5:re.value[0].weathers[5].week,
              day6:re.value[0].weathers[6].week,
            })
        } else {
          console.warn('error');
        }
      };
      request.open('POST', 'http://aider.meizu.com/app/weather/listWeather?cityIds=101300101');
      request.send();
  }
  render() {
         
    return (
       <View style={styles.main} > 

        <View style={styles.circle}>
         <TouchableOpacity onPress={()=>this.getCityData(this)}>
          <Text style={styles.city} >{this.state.city}</Text>
        </TouchableOpacity>
        <Text>{this.state.wD}</Text><Text>{this.state.wS}</Text>
        <Text style={styles.temperature}>{this.state.temp_day_c}°</Text>
        </View>
        <View style={styles.grid3}>
         <View style={styles.cell3}>
            <Text>{this.state.day}</Text>
            <Text>{this.state.temp_day_c}°</Text>
          </View>
           <View style={styles.cell3}>
            <Text>{this.state.day1}</Text>
            <Text>{this.state.temp_day_c1}°</Text>
          </View>
           <View style={styles.cell3}>
            <Text>{this.state.day2}</Text>
            <Text>{this.state.temp_day_c2}°</Text>
          </View>
           <View style={styles.cell3}>
            <Text>{this.state.day3}</Text>
            <Text>{this.state.temp_day_c3}°</Text>
          </View>
          <View style={styles.cell3}>
            <Text>{this.state.day4}</Text>
            <Text>{this.state.temp_day_c4}°</Text>
          </View>
          <View style={styles.cell3}>
            <Text>{this.state.day5}</Text>
            <Text>{this.state.temp_day_c5}°</Text>
          </View>
          <View style={styles.cell3}>
             <Text>{this.state.day6}</Text>
            <Text>{this.state.temp_day_c6}°</Text>
          </View>
        </View>
      </View>
    );
  }
}
let styles = StyleSheet.create({
  main:{
    height:height,
    alignItems: 'center',
    backgroundColor:'#FCFCFC'
  },
  circle:{
    width:0.8*width, 
    height: 0.8*width, 
    borderRadius: 0.8*width,
    marginTop:45,
    borderWidth:4,
    backgroundColor:'#ECF5FF',
    borderColor:'#000000',
    alignItems: 'center'
   
  },
  city:{
    fontSize:0.1*width,
    marginTop:0.1*height
  },
  temperature:{
     fontSize:0.1*width,
     marginTop:0.05*height
  },
  grid3:{
    marginTop:0.3*width,
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'center',
  },
  cell3:{
    flex:1, 
    height:135,
    alignItems:'center',
    justifyContent:'center',
  },
});


